<template>
  <div class="search-key-container">
    <searchBox @handSearch="reset">
      <template #yyxbread>
        <div style="display: flex; align-items: center">
          <el-icon>
            <Location />
          </el-icon>
          <span class="f12 ml10 mr10">当前位置：</span>
          <el-breadcrumb separator="/" class="f12">
            <el-breadcrumb-item>{{ $route.query.searchType === "1" ? "关键词搜索" : "图片搜索" }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </template>
      <!-- 选中筛选的数据 -->
      <div class="chose_list" v-show="!isShowScreen && filterCondition.length > 0">
        <ul>
          <li v-for="(item, index) in filterCondition" :key="index">{{ item.stastsName || item.bandName }}</li>
          <li @click="handelClickExpand">
            <span class="expand">展开</span>
            <el-icon v-if="isExpand">
              <ArrowDown />
            </el-icon>
            <el-icon v-else>
              <ArrowUp />
            </el-icon>
          </li>
        </ul>
      </div>
    </searchBox>
    <!-- 属性值筛选 -->
    <div
      class="filter-wrap mt134"
      v-show="!isShowFeedback && isShow"
      :style="{ top: !isShowScreen ? '140px' : '114px', padding: expandHistory ? 0 : '0 20px 0 20px' }"
    >
      <!-- 文字搜索 -->
      <div v-show="$route.query.searchType === '1'">
        <attrFilter
          :filterData="filterData"
          @changeAttr="changeAttr"
          :expand="expand"
          @reset="reset"
          @updateList="handelUpdateList"
        >
          <template #select>
            <div style="margin-bottom: 20px">
              <div style="display: flex; flex-wrap: wrap">
                <div class="attr-item">
                  <p style="color: #86909c; font-size: 16px">线上同款：</p>
                  <div class="attr3 ml4">
                    <el-select
                      v-model="isOnlineEquivalent"
                      placeholder="请选择"
                      size="small"
                      clearable
                      style="min-width: 120px"
                      @change="onlineEquallyChange"
                    >
                      <el-option label="线上有同款" :value="1" />
                      <el-option label="线上无同款" :value="0" />
                    </el-select>
                  </div>
                </div>
                <div class="attr-item">
                  <p style="color: #86909c; font-size: 16px">是否有模型：</p>
                  <div class="attr3 ml4">
                    <el-select
                      v-model="isModel"
                      placeholder="请选择"
                      size="small"
                      clearable
                      style="min-width: 120px"
                      @change="onlineEquallyChange"
                    >
                      <el-option label="有模型" :value="1" />
                      <el-option label="无模型" :value="0" />
                    </el-select>
                  </div>
                </div>
                <div class="attr-item">
                  <p style="color: #86909c; font-size: 16px">是否定制：</p>
                  <div class="attr3 ml4">
                    <el-select
                      v-model="customType"
                      placeholder="请选择"
                      size="small"
                      clearable
                      style="min-width: 120px"
                      @change="onlineEquallyChange"
                    >
                      <el-option label="不可定制" :value="1" />
                      <el-option label="可定制" :value="2" />
                    </el-select>
                  </div>
                </div>
              </div>
              <div style="display: flex; flex-wrap: wrap">
                <div class="attr-item">
                  <p style="color: #86909c; font-size: 16px; flex-shrink: 0">定制类型：</p>
                  <el-checkbox-group v-model="templateCustomTypeList" size="small">
                    <!-- 二级属性 -->
                    <div v-for="item in shopType" class="attr-wrap attr-only2" style="margin-top: 20px" :key="item.dictValue">
                      <el-checkbox
                        :label="item.dictLabel"
                        :value="item.dictValue"
                        :key="item.dictValue"
                        @change="onlineEquallyChange"
                      >
                        <template #default>
                          <p class="attr2">{{ item.dictLabel }}</p>
                          <img class="active-icon" src="@/assets/images/chose_icon.png" alt="" />
                        </template>
                      </el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </template>
        </attrFilter>
      </div>
      <!-- 图片搜索 -->
      <div v-show="$route.query.searchType === '2'" class="img-serach-attr">
        <div class="left mr20">
          <img :src="$route.query.shearchPicUrl" alt="" @click="openImgCutter" />
          <ImgCutterMy :imgUrl="imgCutterUrl" @getCoverImage="getCoverImage" />
        </div>
        <div class="right">
          <div v-if="filterData.length > 0">
            <attrFilter :filterData="filterData" @changeAttr="changeAttr" @reset="reset" />
          </div>
        </div>
      </div>
    </div>
    <!-- 排序 -->
    <div class="sort-wrap" v-if="!isShowFeedback" :class="{ mt10: !isShowScreen && filterCondition.length > 0 }">
      <div class="left">
        <p>排序：</p>
        <el-button :class="{ active: currentSort.sortType === 1 }" text bg @click="changeSort(1)">
          销量
          <el-icon>
            <Sort />
          </el-icon>
        </el-button>
        <el-button :class="{ active: currentSort.sortType === 2 }" text bg @click="changeSort(2)">
          价格
          <el-icon>
            <Sort />
          </el-icon>
        </el-button>
        <el-button :class="{ active: currentSort.sortType === 3 }" text bg @click="changeSort(3)">
          新品
          <el-icon>
            <Sort />
          </el-icon>
        </el-button>
      </div>
      <div class="right">
        <p>价格范围：</p>
        <div>
          <el-input type="number" min="0" v-model="minPrice" placeholder="请输入" @change="changeMinPrice"></el-input>
          <i> 至 </i>
          <el-input type="number" min="0" v-model="maxPrice" placeholder="请输入" @change="changeMaxPrice"></el-input>
        </div>
      </div>
    </div>

    <div class="content">
      <!-- 关键词查询有数据 -->
      <div v-if="!isShowFeedback" class="list-wrap">
        <!-- 数据列表 -->
        <el-row class="pro-wrap" v-if="list.length > 0">
          <div v-for="item of list" :key="item.name" @click="handelChechDetail(item)">
            <div class="pro-item">
              <img :src="item.mainPicUrl" alt="" />
              <p class="f16 mt26 mb8 text-over">{{ item.productAliasName || item.productName }}</p>
              <i>¥ {{ item.businessLowestPrice || "--.--" }}</i>
            </div>
          </div>
        </el-row>

        <div v-if="list.length > 0" style="display: flex; justify-content: center" class="pb40">
          <el-pagination
            class="jzt-pagination mt20"
            background
            v-model:current-page="pagination.page"
            v-model:page-size="pagination.size"
            :page-sizes="pagination.sizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

        <!-- 属性筛选为空 -->
        <el-empty v-else description="暂无数据" />
      </div>

      <!-- 关键词查询无数据 -->
      <div v-else class="empty">
        <img src="@/assets/images/empty.png" alt="" />
        <p class="f14 mb32">暂无相关商品信息</p>
        <div class="info-wrap mb40">
          <p class="f14 mb8">商品采购需求描述</p>
          <span>设计师您好，如果您没有搜索到相关商品，请告诉我们，我们会尽力帮你~~</span>
          <!-- 文本域，告知细节 -->
          <el-input
            class="dart-textarea mb20 mt20"
            v-model="textarea"
            style="width: 100%"
            maxlength="8000"
            show-word-limit
            :rows="4"
            type="textarea"
            placeholder="如：某品牌、风格、尺寸、款式、向我提供图片及详细信息……"
          />

          <!-- 上传文件 -->
          <el-upload
            v-model:file-list="docFileList"
            ref="uploadFile"
            :show-file-list="true"
            multiple
            :auto-upload="false"
            :on-change="
              (file, fileList) => {
                handleAvatarChangeIcon(file, fileList);
              }
            "
          >
            <el-button type="primary" link>
              <img class="mr6" src="@/assets/images/link.png" alt="" style="width: 12px; height: 12px; margin-top: 0" />
              添加附件
            </el-button>
          </el-upload>
          <div class="mt20" style="text-align: center">
            <el-button :disabled="docFileList.length <= 0" type="primary" style="width: 320px" @click="submit"
              >提交商品信息
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import searchBox from "@/views/home/components/search";
import { Link, Sort } from "@element-plus/icons-vue";
import { saveSearchkey, emptySubmit, getProducts, queryStastsList, imgMarking } from "@/apis/search";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
import ImgCutterMy from "@/components/ImgCutterMy";
import shopSelectStore from "@/store/modules/shopSelect";
import attrFilter from "./components/attrFilter.vue";

const isShowFeedback = ref(false); //是否显示空数据的反馈模块（只有关键词搜索才进行判断）
const templateCustomTypeList = ref([]);
const shopType = ref(useCodeArrStore().getDict("shop_template_custom_type"));
const list = ref([]);
const textarea = ref("");
const feedbackId = ref(""); //关键词搜索为空的时候，调用保存关键词的接口，返回来的feedbackId，提供给后面的提交反馈使用
const pagination = ref({
  page: 1,
  size: 16,
  sizes: [16, 32, 64],
  total: 100
});
const filterData = ref([]); //筛选的属性值
const _filterVal = ref([]); //用户选中的筛选属性值
const _filterVal3 = ref([]); //用户选中的3级筛选属性值
const _brandIds = ref([]); //品牌
const sorts = ref([
  {
    sortType: 1, //1-销量 2-价格 3-新品
    sortTypeValue: 1 //0-升序 1-降序
  },
  {
    sortType: 2, //1-销量 2-价格 3-新品
    sortTypeValue: 1 //0-升序 1-降序
  },
  {
    sortType: 3, //1-销量 2-价格 3-新品
    sortTypeValue: 1 //0-升序 1-降序
  }
]);
const currentSort = ref({
  sortType: 0, //0-默认排序 1-销量 2-价格 3-新品
  sortTypeValue: 1 //0-升序 1-降序
});
const minPrice = ref(null);
const maxPrice = ref(null);

const isOnlineEquivalent = ref(null); //筛选条件-线上同款
const isModel = ref(null); //筛选条件-是否有模型
const customType = ref(""); //是否定制 1-不可定制 2-可定制尺寸

const expandHistory = ref(false); //是否为点击展开的
const isShow = ref(true);
const isShowScreen = ref(true); //是否显示筛选框
const expand = ref(["2"]);
const filterCondition = ref([]); //过滤条件最后得到的数据
const domId = ref(null);
const isExpand = ref(false); //是否展开

watch(
  () => route,
  val => {
    console.log("路由发生了变化===", val);
    getList();
  },
  { deep: true }
);

onMounted(() => {
  getList();

  let domId = document.getElementById("designer-app");
  domId.value = domId;
  domId.addEventListener("scroll", activationScroll);
});

// 获取筛选的条件
const handelUpdateList = item => {
  filterCondition.value = item;
};

// 滚动事件
const activationScroll = event => {
  // event.preventDefault();
  // ���动事件处理
  expandHistory.value = false;
  const scrollTop = event.target.scrollTop;
  if (scrollTop > 20) {
    isShow.value = false;
    isShowScreen.value = false;
    expand.value = [];
  } else if (scrollTop == 0) {
    isShow.value = true;
    isShowScreen.value = true;
    expand.value = ["2"];
  }
};
const handelClickExpand = () => {
  let domId = document.getElementById("designer-app");
  domId.value = domId;
  isExpand.value = !isExpand.value;
  expandHistory.value = true;
  isShow.value = !isShow.value;
  if (isExpand.value) {
    expand.value = ["2"];
    console.log("aaaaa", domId.value);
    domId.value.removeEventListener("scroll", activationScroll);
    setTimeout(() => {
      domId.value.addEventListener("scroll", activationScroll);
    }, 5000);
  } else {
    expand.value = [];
    console.log("bbbbbb", domId.value);
    domId.value.addEventListener("scroll", activationScroll);
  }
};

// 筛选条件-线上同款
const onlineEquallyChange = () => {
  getList();
};

const reset = () => {
  isOnlineEquivalent.value = "";
  isModel.value = "";
  customType.value = "";
  _filterVal.value = [];
  _filterVal3.value = [];
  _brandIds.value = [];
  pagination.value.page = 1;
  currentSort.value = {
    sortType: 0, //0-默认排序 1-销量 2-价格 3-新品
    sortTypeValue: 1 //0-升序 1-降序
  };
  minPrice.value = null;
  maxPrice.value = null;
  getList();
};

//属性筛选id改变时的回调
const changeAttr = ({ filterVal, filterVal3, brandIds }) => {
  // console.log('子组件返回的数据===', filterVal, filterVal3)
  _filterVal.value = filterVal;
  _filterVal3.value = filterVal3;
  _brandIds.value = brandIds || [];
  filterDataSubmit(); //属性筛选接口请求
};

const imgCutterUrl = ref("");
const openImgCutter = () => {
  imgCutterUrl.value = route.query.shearchPicUrl;
};

//获取裁剪之后的图片file
const getCoverImage = async file => {
  let cutterImg = {};
  await customUpload(cutterImg, { file: { name: file.fileName, raw: file.file } }, "file");
  console.log("裁剪之后的图片===", cutterImg);

  router.push({
    path: "/search/searchkey",
    query: {
      value: "",
      searchType: 2, //文字搜索-1  图片搜索-2
      shearchPicUrl: cutterImg.url,
      shearchPicId: cutterImg.uid
    }
  });
};

const changeMinPrice = val => {
  if (Number(val) > Number(maxPrice.value) && maxPrice.value) {
    ElMessage({
      message: "最小值必须<最大值",
      type: "error",
      offset: 60
    });
    if (maxPrice.value && minPrice.value) minPrice.value = null;
  } else {
    if ((maxPrice.value && minPrice.value) || (!maxPrice.value && !minPrice.value)) filterDataSubmit(true); //进行属性值筛选，并重置页码
    // if ((maxPrice.value && minPrice.value) || (!maxPrice.value && !minPrice.value)) {
    //   //进行属性值筛选，并重置页码
    //   pagination.value.page = 1;
    //   getList({
    //     stastsIdsStr: _filterVal3.value, //属性筛选ids
    //     minPrice: Number(minPrice.value),
    //     maxPrice: Number(maxPrice.value)
    //   });
    // }
  }
};
const changeMaxPrice = val => {
  if (Number(val) < Number(minPrice.value) && minPrice.value) {
    ElMessage({
      message: "最大值必须>最小值",
      type: "error",
      offset: 60
    });
    if (maxPrice.value && minPrice.value) maxPrice.value = null;
  } else {
    if ((maxPrice.value && minPrice.value) || (!maxPrice.value && !minPrice.value)) filterDataSubmit(true); //进行属性值筛选，并重置页码
    // if ((maxPrice.value && minPrice.value) || (!maxPrice.value && !minPrice.value)) {
    //   //进行属性值筛选，并重置页码
    //   pagination.value.page = 1;
    //   getList({
    //     stastsIdsStr: _filterVal3.value, //属性筛选ids
    //     minPrice: Number(minPrice.value),
    //     maxPrice: Number(maxPrice.value)
    //   });
    // }
  }
};

// 更改排序项 销量、价格、新品
const changeSort = sortType => {
  if (currentSort.value.sortType === sortType) {
    // 点击的是同一个排序项，需要更改升序、降序
    currentSort.value.sortTypeValue = currentSort.value.sortTypeValue === 0 ? 1 : 0;
  } else {
    // 点击的是另一个排序项，直接更改当前排序对象，降序
    const obj = sorts.value.filter(item => item.sortType === sortType)[0];
    currentSort.value = obj;
  }
  filterDataSubmit(); //进行属性值筛选
};

/**
 * 只进行图片和关键词的查询
 * 里面会一起查询出已有商品的所有属性值
 */
const imgSearchKey = ref("椅子"); //图片搜索，打标之后返回的识别出的关键词
const getList = async (obj = {}) => {
  isShowFeedback.value = false; //初始化，不显示反馈模块
  _filterVal.value = [];
  _filterVal3.value = [];
  _brandIds.value = [];
  if (route.query.searchType === "2") {
    //1-文字搜索  2-图片搜索
    await imgMarking({ url: route.query.shearchPicUrl }).then(res => {
      if (res.code === 200) {
        imgSearchKey.value = res.data[0]?.value || "";
      }
    });
  }
  getProducts({
    isOnlineEquivalent: isOnlineEquivalent.value,
    isModel: isModel.value,
    customType: customType.value,
    page: pagination.value.page,
    size: pagination.value.size,
    stastsIdsStr: [],
    minPrice: Number(minPrice.value),
    maxPrice: Number(maxPrice.value),
    ...obj,
    searchKey: route.query.searchType === "1" ? route.query.value : imgSearchKey.value, //1-文字搜索  2-图片搜索
    templateCustomTypeList: templateCustomTypeList.value
  }).then(res => {
    if (res.code === 200) {
      list.value = res.data.records;
      pagination.value.total = res.data.total;
      //   list.value = [{ name: 1111 }, { name: 222 }, { name: 333 }, { name: 444 }, { name: 555 }, { name: 666 }, { name: 777 }];
      console.log("商品列表", res.data);
      getFilterData(imgSearchKey.value); //查询出已有商品的所有属性值
      if (list.value.length <= 0) {
        isShowFeedback.value = true; //显示反馈模块
        const params = {
          searchType: route.query.searchType,
          searchWord: route.query.searchType === "1" ? route.query.value : imgSearchKey.value, //1-文字搜索  2-图片搜索
          shearchPicUrl: route.query.shearchPicUrl || "",
          shearchPicId: route.query.shearchPicId || ""
        };
        //保存关键词，并返回反馈id 供提交反馈表单时使用
        saveSearchkey(params).then(res => {
          if (res.code === 200) {
            feedbackId.value = res.data;
          }
        });
      }
    }
  });
};

//获取筛选项的数据，供用户进行条件筛选
const getFilterData = imgSearchKey => {
  queryStastsList({
    searchKey: route.query.searchType === "1" ? route.query.value : imgSearchKey //1-文字搜索  2-图片搜索
    // minPrice: Number(minPrice.value),
    // maxPrice: Number(maxPrice.value)
  }).then(res => {
    if (res.code === 200) {
      filterData.value = res.data || [];
    }
  });
};

//用户进行属性值勾选，筛选数据
/**
 *
 * @param init 为false时，不重置当前分页； 为true时，重置当前分页为1
 */
const filterDataSubmit = (init = true) => {
  // 属性值筛选数据
  // console.log("属性值筛选数据", _filterVal.value, _filterVal3.value);
  const attrIds2 = _filterVal.value.flat(); //选中的二级属性ids
  for (let ids2 of attrIds2) {
    const str = _filterVal3.value.find(item => typeof item === "string" && item.includes(ids2));
    !str && _filterVal3.value.push(ids2);
  }
  if (init) pagination.value.page = 1;
  const params = {
    page: pagination.value.page,
    size: pagination.value.size,
    searchKey: route.query.searchType === "1" ? route.query.value : imgSearchKey.value, //文字搜索
    stastsIdsStr: _filterVal3.value, //属性筛选ids
    brandIds: _brandIds.value, //品牌id
    sortType: currentSort.value.sortType, //排序项-销量、价格、新品
    sortTypeValue: currentSort.value.sortTypeValue, //排序值-升序、降序
    minPrice: Number(minPrice.value),
    maxPrice: Number(maxPrice.value)
  };
  console.log("属性筛选请求参数===", params);
  getProducts(params).then(res => {
    if (res.code === 200) {
      // console.log("这是通过属性筛选后的数据===", res.data);
      list.value = res.data.records;
      pagination.value.total = res.data.total;
    }
  });
};

const handleSizeChange = val => {
  console.log(`${val} items per page`);
  pagination.value.size = val;
  filterDataSubmit(false);
};
const handleCurrentChange = val => {
  console.log(`current page: ${val}`);
  pagination.value.page = val;
  filterDataSubmit(false);
};

const submit = () => {
  console.log("反馈数据===", FileList.value);
  const imgUrls = FileList.value?.map(item => item.url) || [];
  const imgIds = FileList.value?.map(item => item.uid) || [];
  const params = {
    feedbackId: feedbackId.value,
    searchRemark: textarea.value,
    imgFeedbackUrls: imgUrls.join(","),
    imgFeedbackIds: imgIds.join(",")
  };

  emptySubmit(params).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "您的反馈已经提交成功~",
        type: "success",
        offset: 60
      });
      router.push({ path: "/home/index" });
    } else {
      ElMessage({
        message: res.msg,
        type: "error"
      });
    }
  });
};

//====================================图片上传========================================================================================
import { ElMessage } from "element-plus";
import useMultipartOssStore from "@/store/modules/multipartOssStore.js";

const ossStore = useMultipartOssStore();
import {
  getFolder,
  _throttle, //节流，多次频繁触发时，只执行第一次
  _debounce //防抖，多次频繁触发时，只执行最后一次
} from "@/utils/index";
import { imgsUpload } from "@/apis/feedback";
import { round } from "lodash";
import useCodeArrStore from "@/store/modules/select";

const uploadFile = ref();
const FileList = ref([]);
const docFileList = ref([]);
// const imgIsReady = ref(false);
const handleAvatarChangeIcon = _debounce(async (file, fileList, type = "file") => {
  //选中文件触发的change事件
  console.log("触发文件上传==", fileList);
  const _fileList = fileList.filter(item => item.status === "ready"); //未上传成功的图片
  if (type === "file") {
    FileList.value = fileList;
  }
  for (let item of _fileList) {
    await customUpload(item, { file: item }, type);
  }
}, 100);

/**
 * 上传
 */
const customUpload = async (item, option, type) => {
  // 合并已上传和当前上传文件
  const folder = getFolder();
  const objName = folder + option.file.name;
  await ossStore
    .submit(objName, option.file.raw)
    .then(async res => {
      await ossStore.setACL(objName, fileReadRole.publicRead);
      res.fileUrl = await ossStore.signatureUrl(objName);
      console.log("文件上传成功，地址为===", res.fileUrl);
      if (type === "file") {
        item["url"] = res.fileUrl.split("?")[0];
        const UID = Number(String(new Date().getTime()) + String(Math.floor(Math.random() * (999 - 100 + 1)) + 100));
        item["uid"] = option.file.uid || UID;
      }
      item["folder"] = objName;

      // const Option = JSON.parse(JSON.stringify(option));
      // uploadIMG(Option); //图片上传到业务端
    })
    .catch(err => {
      alert(JSON.stringify(err));
    });
};
const handleRemove = file => {
  console.log("移除===", file);
  uploadImg.value.handleRemove(file);
};

//将图片上传到业务端服务
const uploadIMG = option => {
  const nameArr = option.file.name.split(".");
  const uploadArr = [
    {
      fileId: option.file.uid,
      objectName: option.file.folder, //目录＋文件名称
      url: option.file.url || option.file.video,
      access: "public-read",
      fileName: option.file.name, //文件名称
      bucketName: "51-jzt-dev",
      size: option.file.size,
      type: true,
      suffix: nameArr[nameArr.length - 1]
    }
  ];
  imgsUpload(uploadArr).then(res => {
    console.log(909090, res);
  });
};
const fileReadRole = {
  defaultRole: "",
  privateRole: "private",
  publicRead: "public-read",
  publicReadWrite: "public-read-write"
};

const handelChechDetail = data => {
  // console.log(9090909,data)
  shopSelectStore().setShopSelect({ name: data.categoryName });
  shopSelectStore().setShopDetail(data);

  const routeUrl = router.resolve({
    path: "/shopDetail/index",
    query: {
      id: data.productId
    }
  });
  window.open(routeUrl.href, "_blank");
};
</script>

<style lang="scss" scoped>
$gray: #f8fafb;

p,
h1 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

:deep(.filter) {
  padding: 20px;
}
.list-wrap {
  min-height: 800px;
}
.chose_list {
  margin-top: 100px;
  background-color: #fff;
  padding: 20px;
  overflow: hidden;
  position: fixed;
  top: -6px;
  width: 100%;
  z-index: 9;

  ul {
    display: flex;

    li {
      padding: 4px 10px;
      border: 1px dashed #ccc;
      margin: 0 10px 0 0;
      border-radius: 20px;
      color: #4e5969;
    }

    li:last-child {
      cursor: pointer;
      border: none;
      display: flex;
      align-items: center;
      padding: 0;

      .expand {
        margin: 0 6px 0 0;
      }
    }
  }
}

:deep(.el-collapse-item__wrap) {
  padding-top: 4px !important;
}

:deep(.el-button.el-button--primary.is-link) {
  --el-button-text-color: #007dff;

  &:hover {
    --el-button-hover-link-text-color: #007dff;
  }
}

:deep(.el-checkbox-group) {
  display: flex;

  .attr-wrap {
    display: flex;
    align-items: center;
    border-radius: 4px;
    height: 32px;
    padding: 0 8px;

    &:not(:last-of-type) {
      margin-right: 8px;
    }
  }
}

:deep(.el-checkbox.el-checkbox--small.is-bordered) {
  height: auto;
  height: 32px;

  .el-checkbox__label {
    .attr-wrap {
      display: flex;
      align-items: center;
    }
  }
}

.sort-wrap {
  display: flex;
  justify-content: space-between;
  padding: 20px;

  & > div {
    display: flex;
    align-items: center;
    font-size: 14px;

    p {
      font-size: 16px;
    }

    :deep(.el-button.is-text.is-has-bg) {
      background-color: white;
      border-radius: 2px;
      border: 1px solid #dcdfe6;

      &.active {
        background-color: #424e66;
        color: white;
      }
    }

    :deep(.el-button.active) {
      background-color: #424e66;
    }
  }

  .right {
    :deep(.el-input__wrapper) {
      background-color: white !important;
    }

    & > div {
      display: flex;
      align-items: center;
    }

    i {
      font-style: normal;
      display: inline-block;
      margin: 0 10px;
    }

    :deep(.el-input__wrapper) {
      background-color: white;
      width: 80px;
    }
  }
}

.filter-wrap {
  background-color: $gray;
  padding: 0px 20px 0 20px;
  position: sticky;
  top: 114px;
  z-index: 2;

  & > div {
    background-color: white;
    // padding: 0 20px 20px 20px;
    border-radius: 10px;
    box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.05);
  }

  .img-serach-attr {
    display: flex;

    .left {
      display: flex;
      width: 100px;
      height: 100px;
      position: relative;

      & > div {
        // width: 100px;
        // height: 100px;
        // position: relative;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .right {
      flex: 1;
    }
  }

  .attr-item {
    display: flex;
    align-items: center;
    margin-right: 50px;
  }

  :deep(.el-collapse-item__header) {
    font-size: 16px;
    color: #3d3d3d;
  }

  :deep(.el-collapse-item__wrap) {
    border-bottom: none;

    .el-collapse-item__content {
      padding-bottom: 0;
    }
  }
}

.pro-wrap {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.pro-item {
  // height: 400px;
  // box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
  // border-radius: 10px 10px 10px 10px;
  // text-align: center;
  // cursor: pointer;

  position: relative;
  top: 0;
  height: 400px;
  text-align: center;
  background: #ffffff;
  box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
  border-radius: 10px 10px 10px 10px;
  transition: all 0.1s ease-in-out;

  &:hover {
    top: -10px;
    box-shadow: 4px 8px 16px 0px rgba(4, 54, 114, 0.15);
  }

  img {
    height: 250px;
    width: 100%;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
  }

  p {
    color: #3d3d3d;
  }

  i {
    font-style: normal;
    font-size: 16px;
    color: #4e5969;
    line-height: 24px;
    display: inline-block;
    margin-bottom: 22px;
  }
}

:deep(.el-textarea.dart-textarea) {
  .el-textarea__inner {
    background: #f2f3f5;
    box-shadow: none;
    border-radius: 4px;
  }

  .el-input__count {
    background: #f2f3f5;
  }
}

.search-key-container {
  margin-top: 114px;

  :deep(.searchContent) {
    .search-box {
      background-color: $gray;
    }
  }

  .content {
    margin: 20px;
    // width: 1440px;
    margin: 0 auto;
    padding: 0 20px 20px 20px;

    .empty {
      background-color: #f8fafb;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      img {
        width: 134px;
        margin: 65px 0 0 0;
      }

      p {
        color: #3d3d3d;
      }

      .info-wrap {
        padding: 20px;
        border-radius: 4px;
        background-color: white;

        p {
          color: #3d3d3d;
        }
      }
    }
  }
}
</style>
